<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt; </button>
    <button id="btn-sel-none"> &lt;&lt; </button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //1.全部到右边
    $('#btn-sel-all').click(function () {
      //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
      $('#src-city>option').appendTo($('#tar-city'));
    });

    //2.全部到左边
    $('#btn-sel-none').click(function () {
      //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
      $('#tar-city>option').appendTo($('#src-city'));
    });

    //3.选中的到右边.
    $('#btn-sel').click(function () {
      //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
      $('#src-city>option:selected').appendTo($('#tar-city'));
    });

    //4.选中的到左边.
    $('#btn-back').click(function () {
      //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
      $('#tar-city>option:selected').appendTo($('#src-city'));
    });

  });
</script>
